<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增服务订单')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <link href="../static/css/bootstrap-select.min.css" th:href="@{/css/bootstrap-select.min.css}" rel="stylesheet"/>
</head>
<body class="white-bg" style="background: #e3e6e6">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content" style="background: #e3e6e6">
        <h2 style="text-align: center;font-weight: bolder">客户预约单</h2>
        <form class="form-horizontal m" id="form-serviceOrder-add">
            <!--<div class="form-group">
                <label class="col-sm-3 control-label">用户id：</label>
                <div class="col-sm-8">
                    <input name="userId" class="form-control" type="text">
                </div>
            </div>-->
            <div style="background: white;margin:8px 130px;padding: 8px;border-radius: 5px">
                <h3 style="width: 34%;text-align: left;margin-left: 30px;">用户基础信息</h3>
                <hr>
                <input id="serviceTypeId" name="serviceTypeId" class="form-control" type="hidden">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">联系人：</label>
                    <div class="col-sm-4">
                        <input name="userName" class="form-control" type="text" placeholder="请输入联系人姓名" autocomplete="off">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">联系电话：</label>
                    <div class="col-sm-4">
                        <input name="userPhone" class="form-control" type="text" placeholder="请输入联系人电话" autocomplete="off">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">所在区域：</label>
                    <div class="col-sm-8">
                        <select class="selectpicker form-control" onchange="initCity()" id="agentProvince" name="agentProvince" required>
                            <option value="">&#45;&#45;省份&#45;&#45;</option>
                        </select>
                        <select class="selectpicker form-control" onchange="initRegion()" id="agentCity" name="agentCity" required>
                            <option value="">&#45;&#45;城市&#45;&#45;</option>
                        </select>
                        <select class="selectpicker form-control" id="orderAreaId" name="orderAreaId" required>
                            <option value="">&#45;&#45;县区&#45;&#45;</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">详细地址：</label>
                    <div class="col-sm-4">
                        <input id="userAddress" name="userAddress" class="form-control" type="text" placeholder="请输入服务详细地址" autocomplete="off">
                    </div>
                </div>
            </div>
            <div style="background: white;margin:20px 130px;padding: 8px;border-radius: 5px">
                <h3 style="width: 34%;text-align: left;margin-left: 30px;">需求服务信息</h3>
                <hr>
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">服务类型：</label>
                    <div class="col-sm-4">
                        <input id="serviceTypeName" name="serviceTypeName" class="form-control" type="text" placeholder="请选择服务类型" onclick="selectServiceType()" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">故障说明：</label>
                    <div class="col-sm-4">
                        <textarea name="faultComment" class="form-control" type="text" rows="3" placeholder="请输入故障说明或者其他备注信息" autocomplete="off"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">维修数量：</label>
                    <div class="col-sm-4">
                        <input name="orderNumber" class="form-control" type="text" placeholder="请输入维修数量" autocomplete="off">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">是否加急：</label>
                    <div class="col-sm-4">
                        <div class="radio-box">
                            <input type="radio" id="refresh-no" name="isPriority" value="1">
                            <label for="refresh-no">是</label>
                        </div>
                        <div class="radio-box">
                            <input type="radio" id="refresh-yes" name="isPriority" value="0" checked>
                            <label for="refresh-yes">否</label>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="form-group">
                <label class="col-sm-4 control-label">上传图片：</label>
                <div class="col-sm-4">
                    <input type="hidden" name="orderImage">
                    <div class="file-loading">
                        <input class="form-control file-upload" id="orderImage" name="file" type="file">
                    </div>
                </div>
            </div>-->
        </form>
    </div>
    <div style="width:100%;text-align:center">
        <button type="submit" style="margin-right: 100px;width: 100px;" class="btn btn-sm btn-primary"  onclick="submitHandler()"><i class="fa fa-check"></i>提交</button>
        <button type="button" style="width: 100px" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关闭</button>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script src="../static/js/bootstrap-select.min.js" th:src="@{/js/bootstrap-select.min.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "zsyh/serviceOrder"
        $("#form-serviceOrder-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var provinceName =$('#agentProvince option:selected').text();
                var cityName = $('#agentCity option:selected').text();
                var districtName = $('#orderAreaId option:selected').text()
                $("#userAddress").val(provinceName.concat(cityName,districtName,$("#userAddress").val()));
                $.operate.save(prefix + "/add", $('#form-serviceOrder-add').serialize());
            }
        }

        $(".file-upload").fileinput({
            uploadUrl: ctx + 'common/uploadOSS',
            maxFileCount: 1,
            autoReplace: true
        }).on('fileuploaded', function (event, data, previewId, index) {
            $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })


        function selectServiceType() {
            var options = {
                title: '服务分类选择',
                width: "380",
                url: ctx + "zsyh/serviceType/selectServiceType/",
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero){
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            var nodes = tree.getSelectedNodes();
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].isParent) {
                    $.modal.msgError("只能选择最后层级节点（" + nodes[i].name + "）");
                    return false;
                }
            }
            var body = layer.getChildFrame('body', index);
            $("#serviceTypeId").val(body.find('#treeId').val());
            $("#serviceTypeName").val(body.find('#treeName').val());
            layer.close(index);
        }

        $(document).ready(function(){
            // 地区下拉框初始化
            $("#agentProvince").selectpicker({width:130, liveSearch: true, liveSearchPlaceholder: "搜索" });
            $("#agentCity").selectpicker({width:120, liveSearch: true, liveSearchPlaceholder: "搜索" });
            $("#orderAreaId").selectpicker({width:120, liveSearch: true, liveSearchPlaceholder: "搜索" });

            // 动态加载省份选项数据
            initSelectOptions("agentProvince","0");
        });// onReady

        /**
         * 动态生成select选项
         * @param selectId
         * @returns
         */
        function initSelectOptions(selectId,parentId) {
            var selectObj = $("#" + selectId);
            $.ajax({
                url : ctx + "zsyh/factory/"+parentId,
                async : false,
                type : "GET",
                success : function(result) {
                    debugger;
                    var configs = result.rows;
                    selectObj.find("option:not(:first)").remove();
                    for (var i in configs) {
                        var addressConfig = configs[i];
                        var optionValue = addressConfig.id;
                        var optionText = addressConfig.areaName;
                        selectObj.append(new Option(optionText, optionValue));
                    }

                    // 刷新select
                    selectObj.selectpicker('refresh');
                },
                error : function(result) {
                    toastr.error('获取['+ parentId + ']信息失败，原因：' + result.errorMessage);
                }
            });// ajax
        }

        /**
         * 根据选择的省份动态初始化城市options
         * @returns
         */
        function initCity() {
            // 当省份变动时，初始化城市和清空县区和街道
            var provinceSel = $("#agentProvince").val();
            initSelectOptions("agentCity", provinceSel);
            $("#orderAreaId").find("option:not(:first)").remove();
            $("#orderAreaId").selectpicker('refresh');
        }

        /**
         * 根据选择的城市动态初始化区域options
         * @returns
         */
        function initRegion() {
            // 选择城市
            var citySel = $("#agentCity").val();
            initSelectOptions("orderAreaId", citySel);
        }
        
    </script>
</body>
</html>